<template>
	<template v-for="menu in props.menus">
		<template v-if="!menu.meta.hidden && hasChildren(menu)">
			<el-sub-menu :index="menu.meta.fullPath">
				<template #title>
					<el-tooltip :content="$t(menu.meta.title) || $t('noTitle')" :disabled="!webConfigStore.layout.menuCollapse || !userStore.menus.includes(menu)"
					            :hide-after="0" placement="top-start">
						<div class="cus-start">
							<icon :color="webConfigStore.getColorVal('menuColor')" :name="menu.meta.icon || webConfigStore.layout.menuDefaultIcon" size="16"/>
							<div v-if="!webConfigStore.layout.menuCollapse || !userStore.menus.includes(menu)">{{ $t(menu.meta.title) || $t('noTitle') }}</div>
						</div>
					</el-tooltip>
				</template>
				<menu-tree :menus="menu.children"></menu-tree>
			</el-sub-menu>
		</template>
		<template v-else-if="!menu.meta.hidden && !hasChildren(menu)">
			<el-menu-item :index="menu.meta.fullPath" @click="onClickMenu(menu)">
				<el-tooltip :content="$t(menu.meta.title) || $t('noTitle')" :disabled="!webConfigStore.layout.menuCollapse || !userStore.menus.includes(menu)"
				            :hide-after="0" placement="top-start">
					<div class="cus-start">
						<icon :color="webConfigStore.getColorVal('menuColor')" :name="menu.meta.icon || webConfigStore.layout.menuDefaultIcon" size="16"/>
						<div v-if="!webConfigStore.layout.menuCollapse || !userStore.menus.includes(menu)">{{ $t(menu.meta.title) || $t('noTitle') }}</div>
					</div>
				</el-tooltip>
			</el-menu-item>
		</template>
	</template>
</template>
<script lang="ts" setup>
import {useWebConfigStore} from '@/stores/modules/webConfig.store'
import {onClickMenu} from '@/utils/routeUtil'
import Icon from '@/components/icon.vue'
import type {MenuVO} from '@/model/route'
import {useUserStore} from '@/stores/modules/user.store'

const userStore = useUserStore()
const webConfigStore = useWebConfigStore()

interface Props {
	menus: MenuVO[]
}

const props = withDefaults(defineProps<Props>(), {
	menus: () => []
})

const hasChildren: (menu: MenuVO) => boolean = menu => {
	if (!menu.children || menu.children.length === 0) {
		return false
	}
	for (const child of menu.children) {
		if (!child.meta.hidden) {
			return true
		}
	}
	return false
}
</script>

<style lang="scss" scoped>
.el-sub-menu .icon,
.el-menu-item .icon {
	margin-right: 5px;
	text-align: center;
	vertical-align: middle;
	width: 24px;
}

.is-active > .cus-start > .icon {
	color: var(--el-menu-active-color) !important;
}

.el-menu-item.is-active {
	background-color: v-bind('webConfigStore.getColorVal("menuActiveBackground")');
}
</style>
